import React, { useState } from 'react';

interface RuleEditorProps {
  onSave: (rule: { pattern: string; meaning: string }) => void;
  onClose: () => void;
}

const RuleEditor: React.FC<RuleEditorProps> = ({ onSave, onClose }) => {
  const [pattern, setPattern] = useState('');
  const [meaning, setMeaning] = useState('');
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (pattern.trim() && meaning.trim()) {
      onSave({ pattern, meaning });
      setPattern('');
      setMeaning('');
    }
  };

  return (
    <div className="rule-editor-overlay">
      <div className="rule-editor">
        <h3>添加新翻译规则</h3>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>她说的话 (支持正则表达式):</label>
            <input
              type="text"
              value={pattern}
              onChange={(e) => setPattern(e.target.value)}
              placeholder="例如: 我没事"
              required
            />
          </div>
          
          <div className="form-group">
            <label>实际意思:</label>
            <input
              type="text"
              value={meaning}
              onChange={(e) => setMeaning(e.target.value)}
              placeholder="例如: 我有事，快来哄我"
              required
            />
          </div>
          
          <div className="button-group">
            <button type="submit">保存规则</button>
            <button type="button" onClick={onClose}>取消</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default RuleEditor;